import React, { Component } from 'react';
import {
    StyleSheet, Text, View, TouchableOpacity, TouchableHighlight,
    KeyboardAvoidingView, Image, ScrollView, PixelRatio, Platform, TextInput
} from "react-native";
import { API, API_GENERATE } from '../../../../config/api';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { Common } from '../../../../component/common/Common';
import { FormItem } from '../component/FormItem';
import { StepItem } from '../component/StepItem';
import DatePicker from 'react-native-datepicker';
import { ApprovalView, RefuseModal } from '../../../../component/ModalVerifylComponent.js';
import { PageStatusIndex } from '../../../../component/page-status/PageStatusIndex';
import { StateLightBox } from '../../../../component/Store';
import ToastUtil from '../../../../utils/toast';
import HTTP from '../../../../utils/http';
import MethodUtil from '../../../../utils/MethodUtil';
import ModalPicDelComponent from '../../../../component/ModalPicDelComponent';
import ImagePicker from 'react-native-image-picker';
const scale = GLOBAL.SCALE;
import { CURRENCY } from '../../../../utils/helper';
import Upload from '../../../../utils/Upload';


let defaultImg = require('../../../../imgs/addphoto2.png');
let deleteIcon = require('../../../../imgs/delete2.png');

const modalPicDelCfg = {
    visible: false,
    uri: null,
    delPress: () => { },
    picPress: () => { },
    fileId: '',
    delTextHide: true
}

export class ApprovePage extends Component {
    static navigationOptions = ({ navigation, navigationOptions }) => {
        const params = navigation.state.params || {};
        let detailStr = params.status == 'HASLOT' ? '详情' : '';
        return {
            headerTitle: '申请授信审批' + detailStr,
            headerTintColor: style.color.white,
            headerLeft: <Common type="headLeft" onPress={() => { navigation.navigate('ApproveListPage', { choice: params.choice || {} }) }} color='#fff' />,
            headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../imgs/goBackEmpty.png')} />),
            headerStyle: {
                elevation: 0,
                backgroundColor: style.color.themeColor,
            },
            headerStyle: style.head.headerStyle,
        }
    };


    constructor(props) {
        super(props);
        let { status, paramsData, choice } = props.navigation.state.params;
        let { creditApplyId, taskId, taskName, taskDefinitionKey, formKey } = paramsData;
        this.creditApplyId = creditApplyId;
        this.formKey = formKey
        this.choice = choice || {};
        //图片弹框
        modalPicDelCfg.picPress = () => {
            modalPicDelCfg.visible = false;
            modalPicDelCfg.uri = null;
            this.setState({
                previewModalVisible: false,
            });
        }
        this.state = {
            loadPage: true,  //刷新页面
            refuseModalVisible: false,   // 驳回
            onoff: '20',   // 10 反驳   20 同意
            status: status,  //   HASLOT 详情 ，LOT 审批,
            loadStatus: 'loading',
            nodeTile: '',   // 节点弹框标题
            zxbCredit: '1',
            uriList: [],
        }
        this.requesting = false;
        this.data = {
            limitDetailData: {},  // 额度详情
            stepData: [],   // 进度数据
        }
        this.sendData = {  //审批参数
            creditApplyId,
            taskId,
            taskName,
            formKey,
            taskDefinitionKey: taskDefinitionKey || null
        }

        //财务节点控制
        this.financeData = {
            'BEFOR': ['20', '21'],// 财务之后
            'NOEW': ['22'],// 财务审批节点
            'END': ['23', '24', '25', '30'],// 财务之后
        }
        this.financeData2 = {
            'FENG': ['22', '23', '24']
        }

        // 查找授信节点 参数
        this.nodeParams = {
        }

        // 审批
        this.stateLightBoxData = {
            onClosePress: this._closeLightBox,
            modalVisible: false,
            title: this.state.nodeTile,
            rowDataList: [
                {
                    taskName: '变更前',
                    auditTime: '',
                    units: '',
                    auditResult: 2,
                },
                {
                    taskName: '变更后',
                    auditTime: '',
                    units: '',
                    auditResult: 2,
                }
            ],
        };


    }

    async	componentWillMount() {
        this._initFn();  // 初始化
    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
    }


    //初始化
    _initFn = async () => {
        if (!this.creditApplyId) return;
        let saveData = await HTTP.POST(API_GENERATE(API.CREDIT_DETAIL), { creditApplyId: this.creditApplyId, corpId: this.choice.corpId, formKey: this.formKey });
        if (saveData) {
            let { registerDate, processInstanceId, creditApplyId } = saveData.creditApplyVO;
            //查找审批节点参数
            this.nodeParams = {
                processInstanceId,
                bizId: creditApplyId,
                bizObjType: '11',
                corpId: this.choice.corpId
            }
            //特殊处理
            saveData.creditApplyVO.registerDate = registerDate && registerDate.split(' ')[0];  //时间去掉秒
            this.data = saveData.creditApplyVO; // 位置注意
            if (this.data.attachmentId) {
                this.getImgView(this.data.attachmentId)
                this.sendData.attachmentId = this.data.attachmentId
            }
            // 数据 除 10000
            if (this.data.zxbApproveAmount) {
                this.data.zxbApproveAmount = MethodUtil.countObj.divide(this.data.zxbApproveAmount, 10000, 2);
            }
            if (this.data.creditApplyAmount) {
                this.data.creditApplyAmount = MethodUtil.countObj.divide(this.data.creditApplyAmount, 10000, 2);
            }
            //授信额度授信
            this.data.limitDetailData = saveData.creditInfoVO;
            //获取审批节点列表
            await this._findNode();
        }

        //显示财务编辑
        let lsOnoff = false;
        let lsOnoff2 = false;
        for (key in this.financeData) {
            this.financeData[key].forEach((item) => {
                if (item == this.data.creditApplyStatus) {
                    lsOnoff = key;
                }
            })
        }
        for (key in this.financeData2) {
            this.financeData2[key].forEach((item) => {
                if (item == this.data.creditApplyStatus) {
                    lsOnoff2 = key;
                }
            })
        }

        this.setState({
            onoffFnce: lsOnoff,  //财务判断
            onoffFnce2: lsOnoff2,//风控判断
            loadStatus: 'data'  // 加载完成
        })
    }

    // 节点查询
    _findNode = async () => {
        let findNodeData = await HTTP.GET(API_GENERATE(API.FIND_NODE), this.nodeParams);
        if (findNodeData) {
            //进度数据转化
            this._stepDataFn(findNodeData);//saveData.auditLogVOs
        }
    }

    // 跳企业详情
    _goDetail = (companyId) => {
        this.props.navigation.navigate('EnterpriseDetailsPage', {
            status: 'PASS',
            companyId,
            choice: this.choice
        })
    }

    //数据调整
    _stepDataFn(data) {
        let lsData = [];
        data && data.forEach((item, index) => {
            let lsJson = {};
            //时间 start
            if (item.auditTime) {
                let lsArr = item.auditTime && item.auditTime.split(' ');
                let lsArrDay = lsArr[0] && lsArr[0].split('-');
                let lsArrHour = lsArr[1] && lsArr[1].split(':');
                lsJson.day = lsArrDay[1] + '月' + lsArrDay[2] + '日';
                lsJson.hour = lsArrHour[0] + '：' + lsArrHour[1];
            } else {
                lsJson.day = '';
                lsJson.hour = '';
            }
            //时间 end
            lsJson.auditResult = item.auditResult;
            lsJson.info = item.taskName;
            // item.auditName;
            lsJson.visible = (data.length - 1 == index) ? false : true; // 最后一条
            lsJson.who = (item.auditStaffName || '');
            lsJson.logId = item.logId;   // 新增字段  代表是否已审批
            lsJson.remark = item.remark;
            lsData.push(lsJson);
        })
        this.data.stepData = lsData;
    }

    //同意，驳回接口调用
    _getApprovalView() {
        //HASLOT 详情   LOT 审批
        return this.state.status == "LOT" ? (
            <View style={{ backgroundColor: '#fff', position: 'absolute', bottom: 0 }}>
                <ApprovalView
                    agreePress={() => {
                        this.remark = '';
                        this.setState({
                            refuseModalVisible: true,
                            onoff: '20' //同意
                        })
                    }}
                    refusePress={() => {
                        this.remark = '';
                        this.setState({
                            refuseModalVisible: true,
                            onoff: '10'  //驳回
                        })
                    }} />
            </View>
        ) : null;
    }
    //按钮提交接口
    _getCommit = async () => {
        if (this.requesting) return;
        let { onoff, onoffFnce, zxbCredit } = this.state;
        let { zxbApproveAmount, creditApplyAmount, accountDay, creditEndDate, graceDay, zxbCreditCode, isZxbCompany, companyId, tempZxbCreditCode } = this.data;
        this.sendData.creditApplyStatus = onoff;
        let coincide
        if (onoff == '20') {
            //风控管理&&非中信保客户&&数据无中信保编号
            if (this.formKey === 'FKZX' && isZxbCompany == '0' && !zxbCreditCode) {
                // zxbCredit 用户选有无中信保
                if (zxbCredit === '1') {
                    coincide = await HTTP.POST(API_GENERATE(API.CREDIT_CHECK), {
                        zxbCreditCode: this.sendData.zxbCreditCode,
                        companyId: companyId
                    });
                    if (coincide === true) {
                        ToastUtil.showError('中信保编号重复，请调整')
                        return
                    }
                    this.sendData.isZxbCompany = '1'
                }
                else {
                    this.sendData.zxbCreditCode = tempZxbCreditCode
                    this.sendData.isZxbCompany = '0'
                }
            }
            //非风控管理||是中信保客户||数据中有中信保编号
            else {
                this.sendData.isZxbCompany = isZxbCompany
                if (isZxbCompany) {
                    this.sendData.zxbCreditCode = zxbCreditCode
                }
                else {
                    this.sendData.zxbCreditCode = tempZxbCreditCode;
                }
            }
        }
        if (coincide === true) {
            return
        }
        if (this.remark) {
            this.sendData.approveComment = this.remark
        }

        // 财务修改字段
        if (onoffFnce) {
            this.sendData.zxbApproveAmount = MethodUtil.countObj.multiply(zxbApproveAmount, 10000);
            this.sendData.creditApplyAmount = MethodUtil.countObj.multiply(creditApplyAmount, 10000);
            this.sendData.accountDay = accountDay;
            this.sendData.creditEndDate = creditEndDate;
            this.sendData.graceDay = graceDay;
        }

        this.setState({
            refuseModalVisible: false,
            loadStatus: 'loading'  // 加载完成
        })
        this.requesting = true;
        this.sendData.corpId = this.choice.corpId;
        this.sendData.auditResult = onoff == '20' ? 1 : 0;
        console.log(this.sendData)
        let saveData = await HTTP.POST(API_GENERATE(API.CREDIT_AUDIT), this.sendData);
        this.setState({
            loadStatus: 'data'  // 加载完成
        });
        if (saveData) {
            ToastUtil.showSuccess(this.sendData.creditApplyStatus == '20' ? '审批成功' : '驳回成功').then(() => {
                this._goBack();
            })
        } else {
            this.requesting = false;
        }
    }

    // 返回上一个页面
    _goBack = () => {
        this.props.navigation.navigate('ApproveListPage', { choice: this.choice || {} })
        setTimeout(() => {
            this.requesting = false;
        }, 1000)
    }

    //财务审批
    _financeRender = () => {
        let { zxbApproveAmount, creditApplyAmount, accountDay, creditEndDate, graceDay } = this.data;
        return (
            <View>
                {
                    zxbApproveAmount || zxbApproveAmount == 0 ? (<FormItem activeColor={style.color.themeColor} title={'中信保审批额度'} regulation={'thousands'} onChangeTextFn={(str1, str2) => { this._writeFn(str1, str2, 'zxbApproveAmount') }} keyboardType={'numeric'} iconRightText={'￥'} value={zxbApproveAmount || '0.00'} rightText={'万元'} />) : (
                        <FormItem regulation={'thousands'} type={'text'} title={'中信保审批额度'} value={'--'} />
                    )
                }
                <FormItem activeColor={style.color.themeColor} title={'本次申请额度'} regulation={'thousands'} onChangeTextFn={(str1, str2) => { this._writeFn(str1, str2, 'creditApplyAmount') }} keyboardType={'numeric'} iconRightText={'￥'} value={creditApplyAmount || '0.00'} rightText={'万元'} />
                <FormItem activeColor={style.color.themeColor} title={'授信天数'} onChangeTextFn={(str1) => { this._writeDayFn(str1, 'accountDay') }} keyboardType={'numeric'} value={accountDay || '5'} rightText={'天'} />
                <View>
                    <FormItem activeColor={style.color.themeColor} type={'select'} title={'授信有效期'} value={creditEndDate} />
                    <DatePicker
                        style={styles.fromTime}
                        date={creditEndDate}
                        mode="date"
                        format="YYYY-MM-DD"
                        minDate={new Date()}
                        maxDate="2100-12-01"
                        confirmBtnText="确认"
                        cancelBtnText="取消"
                        customStyles={{
                            dateIcon: {
                                opacity: 0,
                                width: 0
                            },
                            dateInput: {
                                borderWidth: 0
                            }
                        }}
                        onDateChange={(date) => { this._setTimeCallback(date); }}
                    /></View>
                <FormItem activeColor={style.color.themeColor} title={'宽限天数'} onChangeTextFn={(str1) => { this._writeDayFn(str1, 'graceDay') }} value={graceDay || '0'} rightText={'天'} />
            </View>
        )
    }

    //详情 ,除财务意外的审批
    _detailRender = () => {
        let { zxbApproveAmount, creditApplyAmount, accountDay, creditEndDate, graceDay,
            hasZxbAmountChange, hasApplyAmountChange,
            hasGraceDayChange, hasAccountDayChange, hasCreditEndDateChange
        } = this.data;
        return (
            <View>
                {
                    zxbApproveAmount || zxbApproveAmount == 0 ? (
                        <FormItem regulation={'thousands'} titleView={hasZxbAmountChange} clickCallBack={() => { this._clickCallBack('中信保审批额度', 'zxbApproveAmount', 'hasZxbAmountChange') }} type={'text'} title={'中信保审批额度'} iconRightText={'￥'} value={zxbApproveAmount || '0.00'} rightText={'万元'} />
                    ) : (
                            <FormItem regulation={'thousands'} titleView={hasZxbAmountChange} clickCallBack={() => { this._clickCallBack('中信保审批额度', 'zxbApproveAmount', 'hasZxbAmountChange') }} type={'text'} title={'中信保审批额度'} value={'--'} />
                        )
                }
                <FormItem regulation={'thousands'} titleView={hasApplyAmountChange} clickCallBack={() => { this._clickCallBack('本次申请额度', 'creditApplyAmount', 'hasApplyAmountChange') }} type={'text'} title={'本次申请额度'} iconRightText={'￥'} value={creditApplyAmount || '0.00'} rightText={'万元'} />
                <FormItem titleView={hasAccountDayChange} clickCallBack={() => { this._clickCallBack('授信天数', 'accountDay', 'hasAccountDayChange') }} type={'text'} title={'授信天数'} value={accountDay || '5'} rightText={'天'} />
                <FormItem titleView={hasCreditEndDateChange} clickCallBack={() => { this._clickCallBack('授信有效期', 'creditEndDate', 'hasCreditEndDateChange') }} type={'text'} title={'授信有效期'} value={creditEndDate || ''} />
                {
                    this.state.status == 'LOT' ? (<FormItem titleView={hasGraceDayChange} clickCallBack={() => { this._clickCallBack('宽限天数', 'graceDay', 'hasGraceDayChange') }} type={'text'} title={'宽限天数'} value={graceDay || '0'} rightText={'天'} />) : null
                }
            </View>
        )
    }

    //金额-输入框
    _writeFn = (str1, str2, strZhi) => {
        this.data[strZhi] = str2;
    }

    //天数-输入框
    _writeDayFn = (str1, strZhi) => {
        this.data[strZhi] = str1;
    }

    //设置时间
    _setTimeCallback = (date) => {
        this.data.creditEndDate = date;
        this.setState({
            loadPage: false
        })
    }


    // 审批变更弹框关闭
    _closeLightBox = () => {
        this.stateLightBoxData.modalVisible = false;
        this.setState({
            loadPage: false
        })
    }

    //审批节点显示 
    async	_clickCallBack(title, typeStr, typeStr2) {
        this.setState({
            loadStatus: 'loading',
            nodeTile: title
        });

        let lsSnedData = {
            creditApplyId: this.creditApplyId,
        }
        lsSnedData[typeStr2] = true;
        //查询审批节点
        let responseData = await HTTP.POST(API_GENERATE(API.CREDIT_HISTORY), lsSnedData);
        this.setState({
            loadStatus: 'data'
        });

        if (responseData) {
            this.stateLightBoxData.rowDataList[0].auditTime = responseData.origin[typeStr];
            this.stateLightBoxData.rowDataList[1].auditTime = responseData.current[typeStr];
            if ('zxbApproveAmount' == typeStr || 'creditApplyAmount' == typeStr) {
                this.stateLightBoxData.rowDataList[0].units = '万元';
                this.stateLightBoxData.rowDataList[1].units = '万元';
                this.stateLightBoxData.rowDataList[0].auditTime = MethodUtil.countObj.divide(responseData.origin[typeStr], 10000, 2);
                this.stateLightBoxData.rowDataList[1].auditTime = MethodUtil.countObj.divide(responseData.current[typeStr], 10000, 2);
            } else if ('accountDay' == typeStr || 'graceDay' == typeStr) {
                this.stateLightBoxData.rowDataList[0].units = '天';
                this.stateLightBoxData.rowDataList[1].units = '天';
            } else {
                this.stateLightBoxData.rowDataList[0].units = '';
                this.stateLightBoxData.rowDataList[1].units = '';
            }
            this.stateLightBoxData.modalVisible = true;
            this.setState({
                loadPage: false
            })
        }


    }


    enlarge(val) {
        modalPicDelCfg.visible = true;
        modalPicDelCfg.uri = val;
        this.setState({
            ls: true
        })
    }

    getImgView(qualificationAddress) {
        if (!qualificationAddress) return;
        this.setState({ loaded: true })
        const qualificationArr = qualificationAddress.split(',');
        qualificationArr.map(async (fileId, index) => {
            await this.loadedImgs(fileId, qualificationArr.length, index);
        })
    }
    async loadedImgs(fileId, length, index) {
        const { uriList } = this.state;
        const response = await HTTP.GET(API_GENERATE(API.GET_IMG_VIEW), { fileId });
        if (response) {
            const { attachmentFileVO } = response;
            uriList.push({
                uri: response.image || '',
                type: attachmentFileVO.fileExtName.toUpperCase() || 'PNG',
                fileId
            });
            if (uriList.length == length) {
                this.setState({
                    loaded: false,
                });
            }
        } else {
            this.setState({ loaded: false })
        }
    }
    selectPhotoTapped(ocrType) {
        let imgRep = {};
        const options = {
            title: '请选择图片来源',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '相册图片',
            quality: 1.0,
            maxWidth: 500,
            maxHeight: 500,
            storageOptions: {
                skipBackup: true,
                // path: 'images'
            },
            mediaType: 'photo',
        };
        ImagePicker.showImagePicker(options, async (response) => {
            const { uriList } = this.state;
            if (response.didCancel) {
                console.log('User cancelled photo picker');
                return;
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
                return;
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
                return;
            }
            else {
                imgRep.uri = response.uri;
                this.setState({
                    loaded: true
                });
            }
            const uploadImgObj = {
                imgUrl: { uri: response.uri },
                url: API_GENERATE(API.IMG_UPLOAD)
            }
            if (ocrType && ocrType.length) {
                uploadImgObj.ocrType = ocrType;
                uploadImgObj.isOcr = 1;
            } else {
                uploadImgObj.isOcr = 0
            }
            let responseData = await Upload.uploadImg(uploadImgObj);

            if (responseData) {
                if (responseData.fileId) {
                    imgRep.fileId = responseData.fileId;
                    imgRep.type = 'PNG';
                    imgRep.isNew = true
                    uriList.push(imgRep);
                    this.getItemValue()
                }
            }
            this.setState({
                loaded: false
            })
        });
    }
    async _delete(index, fileId) {
        const { uriList } = this.state;
        if (!fileId) return;
        uriList.splice(index, 1);
        this.setState({ uriList }, () => {
            this.getItemValue()
        });
    }
    getItemValue = () => {
        let { uriList } = this.state
        let attachmentId = '';
        uriList.forEach((item, i) => {
            if (item) {
                attachmentId += (i === 0 ? '' : ',') + item.fileId;
            }

        })
        this.sendData.attachmentId = attachmentId
    }
    showImage() {
        let { uriList, zxbCredit } = this.state || {};
        let { isZxbCompany } = this.data || {};
        return (
            <View style={styles.attachmentRow}>
                {uriList.length ? uriList.map((item, i) => {
                    const { uri, fileId, type } = item;
                    return (
                        <TouchableOpacity key={i} style={[styles.attachment, styles.uploadImgBox]}
                            onPress={() => {
                                if (type == 'PDF') {
                                    const { navigate } = this.props.navigation;
                                    navigate('ContractPdfPage', { finalFileId: item.fileId, title: '附件信息' });
                                } else {
                                    this.enlarge(uri);
                                }

                            }} activeOpacity={0.5}>
                            {this.formKey === 'FKZX' && item.isNew ?
                                <TouchableOpacity onPress={this._delete.bind(this, i, fileId)} style={styles.close}>
                                    <Image style={styles.closeImg} source={deleteIcon} />
                                </TouchableOpacity>
                                : null
                            }
                            {type == 'PDF' ?
                                <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }}>
                                    <Text style={{ fontSize: 12 * scale }}>PDF文件</Text>
                                    <Text style={{ fontSize: 10 * scale }}>点击可查看</Text>
                                </View>
                                : <Image source={type == 'ERROR' ? deleteIcon : item} style={styles.cover} />
                            }
                        </TouchableOpacity>
                    )
                }) : null}
                {this.formKey === 'FKZX' && uriList.length < 5 ?
                    <TouchableOpacity style={styles.attachmentAdd} onPress={() => {
                        this.selectPhotoTapped(0);
                    }} activeOpacity={0.5} >
                        <Image source={defaultImg} style={styles.cover} />
                    </TouchableOpacity> : null}
            </View>
        )
    }


    render() {
        let {
            companyName, companyId, registerDate, registerFund, registerFundCurrency,
            creditKind, dealAmount, settlementTypeName, dealProductName, dealProfit,
            dealMaxAmount, remark, limitDetailData, stepData, createByName, zxbCreditCode, isZxbCompany, tempZxbCreditCode } = this.data || {};
        let { usedAmount, creditAmount, hasOverdue, dealYear } = limitDetailData || {};
        let { refuseModalVisible, onoffFnce, onoffFnce2, loadStatus, onoff, zxbCredit } = this.state || {};
        console.log(this.formKey, isZxbCompany)
        return (
            <View style={styles.container}>
                <TouchableOpacity activeOpacity={1} onPress={() => { this._goDetail(companyId) }} style={styles.headBox}>
                    <View>
                        <Text style={[styles.title, styles.white]}>{companyName}</Text>
                        <View style={styles.headText}>
                            <Text style={[styles.headInfo, styles.white]}>成立时间：{registerDate}</Text>
                            <Text style={[styles.headInfo, styles.white]}>注册资本：{registerFund}万{CURRENCY.getUnit(registerFundCurrency).text}</Text>
                        </View>
                    </View>
                    <Image style={styles.leftArrows} source={require('../../../../imgs/credit/leftArrows.png')} />
                </TouchableOpacity>
                <KeyboardAvoidingView style={styles.from} behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={20} >
                    <ScrollView showsVerticalScrollIndicator={false}>
                        <View style={{ backgroundColor: '#e3e3e3', paddingHorizontal: 15 * scale, paddingTop: 25 * scale }}>
                            {this.formKey === 'FKZX' && isZxbCompany == '0' && !zxbCreditCode ?
                                <View>
                                    <View style={styles.zxbBox}>
                                        <Text style={styles.zxbTitle}>是否中信保客户</Text>
                                        <View style={{ flexDirection: 'row', alignItems: "center" }}>
                                            <TouchableOpacity onPress={() => { this.setState({ zxbCredit: '1' }) }} style={styles.selectItem}>
                                                <View style={styles.criclebox}>
                                                    {zxbCredit === '1' ?
                                                        <View style={styles.cricleSelect}>
                                                        </View>
                                                        : null
                                                    }
                                                </View>
                                                <Text style={styles.selectText}>是</Text>
                                            </TouchableOpacity>
                                            <TouchableOpacity onPress={() => { this.setState({ zxbCredit: '0' }) }} style={styles.selectItem}>
                                                <View style={styles.criclebox}>
                                                    {zxbCredit === '0' ?
                                                        <View style={styles.cricleSelect}>
                                                        </View>
                                                        : null
                                                    }
                                                </View>
                                                <Text style={styles.selectText}>否</Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                    <View style={styles.zxbBox}>
                                        <Text style={styles.zxbTitle}>中信保编号</Text>
                                        {zxbCredit === '1' ?
                                            <TextInput
                                                style={styles.zxbInput}
                                                underlineColorAndroid='transparent'
                                                returnKeyType='done'
                                                keyboardType='default'
                                                onChangeText={(txt) => {
                                                    this.sendData.zxbCreditCode = txt
                                                }} />
                                            :
                                            <Text style={styles.zxbValue}>{tempZxbCreditCode}</Text>
                                        }
                                    </View>
                                    <View style={styles.zxbBox}>
                                        <Text style={styles.zxbTitle}>附件</Text>
                                        {this.showImage()}
                                    </View>
                                </View>
                                :
                                <View>
                                    <View style={styles.zxbBox}>
                                        <Text style={styles.zxbTitle}>是否中信保客户</Text>
                                        {
                                            <Text style={styles.zxbValue}>{isZxbCompany === '1' ? '是' : null}</Text>
                                        }
                                        {
                                            <Text style={styles.zxbValue}>{isZxbCompany === '0' ? '否' : null}</Text>
                                        }
                                    </View>
                                    <View style={styles.zxbBox}>
                                        <Text style={styles.zxbTitle}>中信保编号</Text>
                                        <Text style={styles.zxbValue}>{zxbCreditCode ? zxbCreditCode : ''}</Text>
                                    </View>
                                    <View style={styles.zxbBox}>
                                        <Text style={styles.zxbTitle}>附件</Text>
                                        {this.showImage()}
                                    </View>
                                </View>
                            }
                        </View>
                        <View style={styles.fromItemBox}>
                            <FormItem type={'text'} title={'申请人'} value={createByName || ''} />
                            <FormItem type={'text'} title={'业务组织'} value={this.choice.corpName || ''} />
                            <FormItem type={'text'} title={'授信类型'} value={(creditKind == 'SX' ? '赊销' : '预付') || ''} />
                            {onoffFnce == 'NOEW' ? this._financeRender() : this._detailRender()}
                            <FormItem regulation={'thousands'} type={'text'} title={'申请时已用额度'} iconRightText={'￥'} value={usedAmount || '0.00'} />
                            <FormItem regulation={'thousands'} type={'text'} title={'当前授信额度'} iconRightText={'￥'} value={creditAmount || '0.00'} />
                            {/* {onoffFnce2 == 'FENG' ? <FormItem activeColor={style.color.themeColor} title={'中信保编号'} onChangeTextFn={(str1) => { this._writeDayFn(str1, 'zxbCreditCode') }} value={zxbCreditCode || ''} /> : <FormItem type={'text'} title={'中信保编号'} value={zxbCreditCode || '-'} />} */}
                            <FormItem type={'text'} title={'是否存在逾期记录'} value={hasOverdue || '否'} />
                            <FormItem type={'text'} title={'备注'} customStyles={{ paddingRight: 20 * scale }} value={remark || '无'} />
                        </View>
                        <View style={[styles.fromItemBox]}>
                            <FormItem type={'text'} title={'与客户交易年限'} value={dealYear || '0'} />
                            <FormItem regulation={'thousands'} type={'text'} title={'当年交易额'} iconRightText={'￥'} value={dealAmount || '0.00'} />
                            <FormItem type={'text'} title={'常用结算方式'} value={settlementTypeName || '无'} />{/* settlementType */}
                            <FormItem regulation={'thousands'} type={'text'} title={'交易利润'} iconRightText={'￥'} value={dealProfit || '0.00'} />
                            <FormItem regulation={'thousands'} type={'text'} title={'预计今年最大单笔交易额'} iconRightText={'￥'} value={dealMaxAmount || '0.00'} />
                            {/* {
                                attachmentFileVOs && attachmentFileVOs.length ?
                                    <View style={{ flexDirection: 'row' }}>
                                        <View style={styles.listItemText}>
                                            <Text style={styles.text}>附件</Text>
                                        </View>
                                        <View style={{ flexDirection: 'column', flex: 4 }}>
                                            {
                                                attachmentFileVOs.map((item, index) => {
                                                    if (item.fileId && item.fileExtName) {
                                                        return (
                                                            <Text key={index} style={styles.file} onPress={() => {
                                                                if (item.fileExtName === 'PDF') {
                                                                    const { navigate } = this.props.navigation;
                                                                    navigate('ContractPdfPage', { finalFileId: item.fileId, title: '附件信息' });
                                                                } else if (item.fileExtName === 'JPG' || item.fileExtName === 'PNG' || item.fileExtName === 'JPEG' || item.fileExtName === 'BMP') {
                                                                    this.preview(item.fileId);
                                                                } else {
                                                                    ToastUtil.showInfo(`抱歉，暂不支持${item.fileExtName}文件类型的预览～`)
                                                                }
                                                            }}>{item.fileName || ('附件' + index)}</Text>
                                                        )
                                                    } else {
                                                        return null;
                                                    }
                                                })
                                            }
                                        </View>
                                    </View>
                                    : null
                            } */}
                        </View>
                        {
                            stepData && stepData.length > 0 ? (
                                <View style={[styles.fromItemBox, styles.fromItemBoxEnd]}>
                                    {
                                        stepData && stepData.map((item, index) => {
                                            return (
                                                <StepItem {...item} key={index} />
                                            )
                                        })
                                    }
                                </View>
                            ) : null
                        }

                        <View style={{ paddingBottom: 60 * scale }}></View>
                        <RefuseModal
                            titleText={'审批意见'}
                            placeholderText={onoff == '20' ? '请输入同意原因' : null}
                            propsDefaultValue={onoff == '20' ? '审批同意' : '审批驳回'}
                            visible={refuseModalVisible}
                            btnPress={(remark) => {
                                this.remark = remark;
                                this._getCommit();
                            }}
                            bgPress={() => {
                                this.setState({
                                    refuseModalVisible: false,
                                });
                            }} />

                    </ScrollView>
                </KeyboardAvoidingView>
                <StateLightBox  {...this.stateLightBoxData} textStyle={{ marginLeft: 15 * scale, marginRight: 5 * scale }} />
                {
                    loadStatus == 'loading' ? (
                        <View style={{ position: 'absolute', height: '100%', width: '100%', top: 0 }}>
                            <PageStatusIndex status={loadStatus} />
                        </View>
                    ) : null
                }
                {this._getApprovalView()}
                <ModalPicDelComponent {...modalPicDelCfg} />
            </View >
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: style.color.bgGray
    },
    headBox: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: style.color.themeColor,
        paddingLeft: 28 * scale,
        paddingRight: 14 * scale,
        paddingBottom: 28 * scale
    },
    title: {
        fontSize: 16 * scale,
        lineHeight: 22 * scale,
        marginBottom: 11 * scale
    },
    leftArrows: {
        height: 30 * scale,
        width: 30 * scale,
    },
    headInfo: {
        fontSize: 12 * scale,
    },
    white: {
        color: style.color.white
    },
    headText: {
        width: 290 * scale,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    from: {
        flex: 1,
    },
    fromItemBox: {
        backgroundColor: style.color.white,
        paddingLeft: 15 * scale,
        paddingRight: 15 * scale,
        marginBottom: 12 * scale
    },
    btnBox: {
        backgroundColor: style.color.white,
    },
    commit: {
        marginLeft: 15 * scale,
        marginRight: 15 * scale,
        height: 44 * scale,
        borderRadius: 44 * scale,
        backgroundColor: style.color.themeColor,
        marginTop: 15 * scale,
        marginBottom: 10 * scale,
        bottom: 0 * scale,
    },
    commitText: {
        lineHeight: 44 * scale,
        textAlign: 'center',
        fontSize: 18 * scale,
        color: style.color.white
    },
    fromTime: {
        width: 205 * scale,
        paddingVertical: 0,
        paddingTop: 0,
        marginTop: 0,
        opacity: 0,
        position: 'absolute',
        right: 0,
        top: 5 * scale
    },
    fromItemBoxEnd: {
        paddingTop: 40 * scale,
        paddingLeft: 40 * scale,
        paddingBottom: 40 * scale,
        marginBottom: 0
    },
    itemTitle: {
        fontSize: 14 * scale,
        color: style.color.themeColor,
        height: 20 * scale,
        lineHeight: 20 * scale,
        marginTop: 12 * scale,
        marginBottom: 12 * scale,
        textAlign: 'right', marginRight: 6 * scale
    },
    file: {
        flex: 4,
        fontSize: 12 * scale,
        color: style.color.themeColor,
        textAlign: 'right',
        marginLeft: 14 * scale,
        padding: 10
    },
    text: {
        fontSize: 12 * scale,
        color: '#222222'
    },
    textView: {
        flex: 4,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'flex-end',
        alignItems: 'center',
        padding: 6
    },
    listItemText: {
        flex: 2,
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        padding: 6 * scale
    },
    zxbBox: {
        flexDirection: "row",
        marginBottom: 20 * scale,
        alignItems: "center"
    },
    zxbTitle: {
        width: 130 * scale
    },
    selectItem: {
        paddingRight: 50 * scale,
        flexDirection: "row",
    },
    selectText: {
        fontSize: 14 * scale
    },
    criclebox: {
        width: 15 * scale,
        height: 15 * scale,
        borderWidth: 1,
        borderColor: '#999',
        borderRadius: 20 * scale,
        marginRight: 5 * scale,
        justifyContent: 'center',
        alignItems: 'center'
    },
    cricleSelect: {
        width: 7 * scale,
        height: 7 * scale,
        backgroundColor: '#28aef4',
        borderRadius: 20 * scale,
    },
    zxbInput: {
        borderWidth: 1 * scale,
        borderColor: '#e2e2e2',
        backgroundColor: "#fff",
        width: 180 * scale,
        height: 30 * scale,
        borderRadius: 5 * scale,
        padding: 0,
        paddingLeft: 5 * scale,
    },
    attachmentRow: {
        flexDirection: 'row',
        width: 200 * scale,
        flexWrap: 'wrap',
    },
    cover: {
        width: 49 * scale,
        height: 49 * scale,
        marginRight: 10 * scale,
        marginBottom: 10 * scale
    },
    close: {
        position: 'absolute',
        right: 6 * scale,
        top: -6 * scale,
        width: 12 * scale,
        height: 12 * scale,
        zIndex: 10,
    },
    closeImg: {
        width: 12 * scale,
        height: 12 * scale,
    },
})